import 'package:flutter/material.dart';
import 'package:ref/ref.dart';
import 'state.dart';

class TestUpdate extends StatelessWidget {
  const TestUpdate({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('-----测试Ref.update方法+防抖-----'),
        Wrap(
          children: [
            MvvmDemo01(),
            MvvmDemo02(),
          ],
        )
      ],
    );
  }
}

// -------------------------------------------------------------------------------------------------------
class MvvmDemo01 extends StatefulWidget {
  const MvvmDemo01({Key? key}) : super(key: key);
  @override
  _MvvmDemo01State createState() => _MvvmDemo01State();
}

class _MvvmDemo01State extends State<MvvmDemo01> {
  add() {
    /// 只会刷新score的修改
    // score.set(() {
    //   score.value['num'] = (score.value['num'] as int) + 1;
    //   age.value['num'] = (age.value['num'] as int) + 1;
    //   // 返回false, 会阻止页面刷新和事件
    //   // return false;
    // });
    Ref.update(
      () {
        score.value['num'] = (score.value['num'] as int) + 1;
        age.value['num'] = (age.value['num'] as int) + 3;
      },
      UpdateOptions(delay: Duration(milliseconds: 1500)),
    );
  }

  // 添加一个计算属性
  var computeScore = RefCompute<String>(() {
    print('compute计算属性了');
    int num = (score.value["num"] as int) + 10;
    return '加10分最终得分$num';
  });
  // 监听属性
  var watchScore = RefWatch(() => score.value['num'], (oldVal, newVal) {
    print('监听到分数又变了哈！！！！');
  });

  @override
  void dispose() {
    super.dispose();
    computeScore.dispose();
    watchScore.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 2,
      color: Colors.black.withOpacity(0.1),
      padding: EdgeInsets.all(5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RefBuilder(
            () => Text('分数' + score.value['num'].toString(),
                style: TextStyle(fontSize: 20)),
          ),
          RefBuilder(
            () => Text(computeScore.value, style: TextStyle(fontSize: 20)),
          ),
          RefBuilder(
            () => Text('年纪' + age.value['num'].toString(),
                style: TextStyle(fontSize: 20)),
          ),
          TextButton(onPressed: add, child: Text('分数高了')),
        ],
      ),
    );
  }
}

// ---------------------------------------------------------------------------------------------------
class MvvmDemo02 extends StatefulWidget {
  const MvvmDemo02({Key? key}) : super(key: key);
  @override
  _MvvmDemo02State createState() => _MvvmDemo02State();
}

class _MvvmDemo02State extends State<MvvmDemo02> {
  add() {
    age.set(() {
      age.value['num'] = (age.value['num'] as int) - 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 2,
      color: Colors.black.withOpacity(0.2),
      padding: EdgeInsets.all(5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RefBuilder(
            () => Text('年纪' + age.value['num'].toString(),
                style: TextStyle(fontSize: 20)),
          ),
          TextButton(onPressed: add, child: Text('年轻了')),
        ],
      ),
    );
  }
}
